<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./PrincipalTemplate.xhtml">

            <ui:define name="top">
                Eli
            </ui:define>

            <ui:define name="left">

            </ui:define>

            <ui:define name="content">
                <f:view>
                    <h:form> <p:growl life="2000"/>
                        <h1><h:outputText value="Create/Edit Disc"/></h1>
                        <h:panelGrid columns="2">
                            <h:outputLabel value="Barcode:" for="barcode" />
                            <p:inputMask mask="999-999" id="barcode" value="#{discsBean.disc.barcode}" title="Barcode" required="true" requiredMessage="The Barcode field is required."/>
                            <h:outputLabel value="Artist:" for="artist" />
                            <p:inputText id="artist" value="#{discsBean.disc.artist}" title="Artist" required="true" requiredMessage="The Artist field is required." validatorMessage="El Artista debe iniciar en mayuscula">
                                <f:validateRegex pattern="([A-Z]{1}[a-z]+\s?)+"/>
                            </p:inputText>
                            <h:outputLabel value="Title:" for="title" />
                            <p:inputText id="title" value="#{discsBean.disc.title}" title="Title" required="true" requiredMessage="The Title field is required." validatorMessage="El titulo debe iniciar en mayuscula">
                                <f:validateRegex pattern="([A-Z]{1}[a-z]+\s?)+"/>
                            </p:inputText>
                            <h:outputLabel value="Price:" for="price" />
                            <p:inputText id="price" value="#{discsBean.disc.price}" title="Price" required="true" requiredMessage="The Price field is required."/>
                            <h:outputLabel value="Existence:" for="existence" />
                            <p:inputText id="existence" value="#{discsBean.disc.existence}" title="Existence" required="true" requiredMessage="The Existence field is required."/>
                            <p:commandButton action="#{discsBean.processAction}" value="Register" ajax="false"/>
                            <p:commandButton action="DiscsList" value="Cancel" immediate="true" ajax="false"/>
                        </h:panelGrid>


                        <h:panelGrid columns="3">
                            <h:outputLabel value="Genre:" for="idgenre" />
                            <h:selectOneMenu id="idgenre" value="#{discsBean.selectedMusicalGenre}" title="Idgenre" required="true" requiredMessage="The Idgenre field is required.">
                                <!-- TODO: update below reference to list of available items-->
                                <f:selectItems value="#{musicalGenresBean.musicalGenresList}" var="item" itemLabel="#{item.name}" itemValue="#{item.idgenre}" />
                            </h:selectOneMenu>
                            <p:commandButton value="Add" actionListener="#{bookBean.agregarCategoria}" ajax="false"/>
                        </h:panelGrid>


                        <h1><h:outputText value="Musical Genres List"/></h1>
                        <p:dataTable value="#{discsBean.listMusicalGenres}" var="item" scrollable="true" scrollHeight="150">
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Idgenre"/>
                                </f:facet>
                                <h:outputText value="#{item.idgenre}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Name"/>
                                </f:facet>
                                <h:outputText value="#{item.name}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Delete"/>  
                                </f:facet>    
                                <p:commandButton value="Delete" actionListener="#{discsBean.eliminarGeneroDeLista}" ajax="false"/>

                            </p:column>
                        </p:dataTable>

                    </h:form>
                </f:view>

            </ui:define>

        </ui:composition>

    </body>
</html>
